<!-- login.vue -->
<template>
  <view class="container">
    <!-- 返回按钮 -->
    <view class="back-icon">
      <text class="iconfont icon-back"></text>
    </view>
    
    <!-- 切换标签 -->
    <view class="tab-box">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'login' }" 
        @click="activeTab = 'login'"
      >
        登录
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'register' }" 
        @click="activeTab = 'register'"
      >
        注册
      </view>
    </view>
    
    <!-- 登录表单 -->
    <view class="form-box" v-if="activeTab === 'login'">
      <view class="input-group">
        <uni-icons type="email" size="30"></uni-icons>
        <input 
          class="input" 
          type="text" 
          v-model="loginForm.email" 
          placeholder="请输入邮箱" 
          @blur="validateEmail(loginForm.email, 'login')"
        />
      </view>
      <view class="error-tip" v-if="loginErrors.email">{{ loginErrors.email }}</view>
      
      <view class="input-group">
        <uni-icons type="locked" size="30"></uni-icons>
        <input 
          class="input" 
          :type="showLoginPassword ? 'text' : 'password'" 
          v-model="loginForm.password" 
          placeholder="请输入密码" 
          @blur="validatePassword(loginForm.password, 'login'); loginPasswordFocused = false"
          @focus="loginPasswordFocused = true"
        />
        <view class="eye-icon-container" v-if="loginPasswordFocused || loginForm.password">
          <uni-icons custom-prefix="iconfont" 
            type="icon-yanjing_xianshi_o" 
            size="30"
            @click="showLoginPassword = !showLoginPassword"
            v-if="showLoginPassword"
          >
          </uni-icons>
          <uni-icons 
            v-else
            custom-prefix="iconfont"
            type="icon-yanjing_yincang_o" 
            size="30"
            @click="showLoginPassword = !showLoginPassword"
          >
          </uni-icons>
        </view>
      </view>
      <view class="error-tip" v-if="loginErrors.password">{{ loginErrors.password }}</view>
      
      <!-- 登录添加验证码支持 -->
      <view class="verification-box" v-if="loginWithVerification">
        <view class="input-group verification-group">
          <uni-icons type="compose" size="30"></uni-icons>
          <input 
            class="input verification-input" 
            type="text" 
            v-model="loginForm.verificationCode" 
            placeholder="请输入验证码" 
            maxlength="6"
            @blur="validateVerificationCode(loginForm.verificationCode, 'login')"
          />
          <button 
            class="verification-btn" 
            :disabled="!canSendLoginCode || loginCountdown > 0" 
            @click="sendVerificationCode('login')"
          >
            {{ loginCountdown > 0 ? `${loginCountdown}s后重试` : '获取验证码' }}
          </button>
        </view>
        <view class="error-tip" v-if="loginErrors.verificationCode">{{ loginErrors.verificationCode }}</view>
      </view>
      
      <view class="login-options">
        <view class="verification-switch" @click="loginWithVerification = !loginWithVerification">
          <!-- {{ loginWithVerification ? '使用密码登录' : '使用验证码登录' }} -->
        </view>
        <view class="forget-password" @click="forgetPassword">忘记密码?</view>
      </view>
      
      <button 
        class="submit-btn" 
        :disabled="!isLoginFormValid" 
        :class="{ disabled: !isLoginFormValid }" 
        @click="handleLogin"
      >
        登录
      </button>
      
      <!-- 第三方登录 -->
      <view class="third-login">
        <view class="divider">
          <view class="line"></view>
          <view class="text">其他登录方式</view>
          <view class="line"></view>
        </view>
        <view class="icons">
          <view class="icon-item" @click="zfbHandle">
            <image src="https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/icon/zfb.png" mode="heightFix"></image>
          </view>
          <view class="icon-item" @click="wxHandle">
            <image src="https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/icon/wechat.png" mode="heightFix"></image>
          </view>
          <view class="icon-item" @click="qqHandle">
            <image src="https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/icon/qq.png" mode="heightFix"></image>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 注册表单 -->
    <view class="form-box" v-else>
      <view class="input-group">
        <uni-icons type="contact" size="30"></uni-icons>  
        <input 
          class="input" 
          type="text" 
          v-model="registerForm.username" 
          placeholder="请输入用户名" 
          @blur="validateUsername(registerForm.username)"
        />
      </view>
      <view class="error-tip" v-if="registerErrors.username">{{ registerErrors.username }}</view>
      
      <view class="input-group">
        <uni-icons type="email" size="30"></uni-icons>
        <input 
          class="input" 
          type="text" 
          v-model="registerForm.email" 
          placeholder="请输入邮箱" 
          @blur="validateEmail(registerForm.email, 'register')"
        />
      </view>
      <view class="error-tip" v-if="registerErrors.email">{{ registerErrors.email }}</view>
      
      <!-- 注册验证码 -->
      <view class="input-group verification-group">
        <uni-icons type="compose" size="30"></uni-icons>
        <input 
          class="input verification-input" 
          type="text" 
          v-model="registerForm.verificationCode" 
          placeholder="请输入验证码" 
          maxlength="6"
          @blur="validateVerificationCode(registerForm.verificationCode, 'register')"
        />
        <button 
          class="verification-btn" 
          :disabled="!canSendRegisterCode || registerCountdown > 0" 
          @click="sendVerificationCode('register')"
        >
          {{ registerCountdown > 0 ? `${registerCountdown}s后重试` : '获取验证码' }}
        </button>
      </view>
      <view class="error-tip" v-if="registerErrors.verificationCode">{{ registerErrors.verificationCode }}</view>
      
      <view class="input-group">
        <uni-icons type="locked" size="30"></uni-icons>
        <input 
          class="input" 
          :type="showRegisterPassword ? 'text' : 'password'" 
          v-model="registerForm.password" 
          placeholder="请输入密码" 
          @blur="validatePassword(registerForm.password, 'register'); registerPasswordFocused = false"
          @focus="registerPasswordFocused = true"
          @input="validateConfirmPassword()"
        />
        <view class="eye-icon-container" v-if="registerPasswordFocused || registerForm.password">
          <uni-icons custom-prefix="iconfont"
            type="icon-yanjing_xianshi_o" 
            size="30"
            @click="showRegisterPassword = !showRegisterPassword"
            v-if="showRegisterPassword"
          >
          </uni-icons>
          <uni-icons custom-prefix="iconfont"
            type="icon-yanjing_yincang_o" 
            size="30"
            @click="showRegisterPassword = !showRegisterPassword"
            v-else
          >
          </uni-icons>
        </view>
      </view>
      <view class="error-tip" v-if="registerErrors.password">{{ registerErrors.password }}</view>
      
      <view class="input-group">
        <uni-icons type="locked" size="30"></uni-icons>
        <input 
          class="input" 
          :type="showConfirmPassword ? 'text' : 'password'" 
          v-model="registerForm.confirmPassword" 
          placeholder="确认密码" 
          @blur="validateConfirmPassword(); confirmPasswordFocused = false"
          @focus="confirmPasswordFocused = true"
          @input="validateConfirmPassword()"
        />
        <view class="eye-icon-container" v-if="confirmPasswordFocused || registerForm.confirmPassword">
          <uni-icons custom-prefix="iconfont"
            type="icon-yanjing_xianshi_o" 
            size="30"
            @click="showConfirmPassword = !showConfirmPassword"
            v-if="showConfirmPassword"
          >
          </uni-icons>
          <uni-icons custom-prefix="iconfont"
            type="icon-yanjing_yincang_o" 
            size="30"
            @click="showConfirmPassword = !showConfirmPassword"
            v-else
          >
          </uni-icons>
        </view>
      </view>
      <view class="error-tip" v-if="registerErrors.confirmPassword">{{ registerErrors.confirmPassword }}</view>
      
      <view class="agreement">
        <checkbox 
          :checked="isAgree" 
          @click="isAgree = !isAgree" 
          color="#ff5500"
        ></checkbox>
        <text class="agreement-text">
          我已阅读并同意
          <text class="link" @click="goToUserAgreement">《用户协议》</text>
          和
          <text class="link" @click="goToPrivacyPolicy">《隐私政策》</text>
        </text>
      </view>
      
      <button 
        class="submit-btn" 
        :disabled="!isRegisterFormValid" 
        :class="{ disabled: !isRegisterFormValid }" 
        @click="handleRegister"
      >
        注册
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 当前激活的标签页
const activeTab = ref('login');

// 图片基础路径
let baseUrl = uni.$baseUrl

// 登录表单数据
const loginForm = reactive({
  email: '',
  password: '',
  verificationCode: ''
});

// 注册表单数据
const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  verificationCode: ''
});

// 表单错误信息
const loginErrors = reactive({
  email: '',
  password: '',
  verificationCode: ''
});

const registerErrors = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  verificationCode: ''
});

// 是否显示密码
const showLoginPassword = ref(false);
const showRegisterPassword = ref(false);
const showConfirmPassword = ref(false);

// 跟踪输入框的焦点状态
const loginPasswordFocused = ref(false);
const registerPasswordFocused = ref(false);
const confirmPasswordFocused = ref(false);

// 是否同意协议
const isAgree = ref(false);

// 验证码倒计时
const loginCountdown = ref(0);
const registerCountdown = ref(0);

// 是否使用验证码登录
const loginWithVerification = ref(false);

// 验证邮箱格式
const validateEmail = (email, type) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const errObj = type === 'login' ? loginErrors : registerErrors;
  
  if (!email) {
    errObj.email = '邮箱不能为空';
    return false;
  } else if (!emailRegex.test(email)) {
    errObj.email = '请输入有效的邮箱地址';
    return false;
  } else {
    errObj.email = '';
    return true;
  }
};

// 验证密码
const validatePassword = (password, type) => {
  const errObj = type === 'login' ? loginErrors : registerErrors;
  
  if (!password) {
    errObj.password = '密码不能为空';
    return false;
  } else if (password.length < 6) {
    errObj.password = '密码长度不能少于6位';
    return false;
  } else {
    errObj.password = '';
    return true;
  }
};

// 验证用户名
const validateUsername = (username) => {
  if (!username) {
    registerErrors.username = '用户名不能为空';
    return false;
  } else if (username.length < 2) {
    registerErrors.username = '用户名长度不能少于2位';
    return false;
  } else {
    registerErrors.username = '';
    return true;
  }
};

// 验证确认密码
const validateConfirmPassword = () => {
  if (!registerForm.confirmPassword) {
    registerErrors.confirmPassword = '确认密码不能为空';
    return false;
  } else if (registerForm.password !== registerForm.confirmPassword) {
    registerErrors.confirmPassword = '两次输入的密码不一致';
    return false;
  } else {
    registerErrors.confirmPassword = '';
    return true;
  }
};

// 验证验证码
const validateVerificationCode = (code, type) => {
  const errObj = type === 'login' ? loginErrors : registerErrors;
  
  if (!code) {
    errObj.verificationCode = '验证码不能为空';
    return false;
  } else if (code.length !== 6) {
    errObj.verificationCode = '验证码长度应为6位';
    return false;
  } else {
    errObj.verificationCode = '';
    return true;
  }
};

// 添加监听器，当密码或确认密码变化时，重新验证确认密码
watch(() => [registerForm.password, registerForm.confirmPassword], () => {
  if (registerForm.confirmPassword) {
    validateConfirmPassword();
  }
});

// 第三方登录点击触发
function zfbHandle(){
	uni.showToast({
		image:"https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/uni_mall/cat/zfb_cat.gif",
		duration: 2000
	})
}

function wxHandle(){
	uni.showToast({
		image:"https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/uni_mall/cat/wx_cat.gif",
		duration: 2000
	})
}

function qqHandle(){
	uni.showToast({
		image:"https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/uni_mall/cat/qq_cat.gif",
		duration: 2000
	})
}



// 是否可以发送验证码(登录)
const canSendLoginCode = computed(() => {
  return loginForm.email && !loginErrors.email;
});

// 是否可以发送验证码(注册)
const canSendRegisterCode = computed(() => {
  return registerForm.email && !registerErrors.email;
});

// 登录表单是否有效
const isLoginFormValid = computed(() => {
  if (loginWithVerification.value) {
    return loginForm.email && 
      loginForm.verificationCode && 
      !loginErrors.email && 
      !loginErrors.verificationCode;
  } else {
    return loginForm.email && 
      loginForm.password && 
      !loginErrors.email && 
      !loginErrors.password;
  }
});

// 注册表单是否有效
const isRegisterFormValid = computed(() => {
  return registerForm.username && 
    registerForm.email && 
    registerForm.password && 
    registerForm.confirmPassword && 
    registerForm.verificationCode &&
    !registerErrors.username && 
    !registerErrors.email && 
    !registerErrors.password && 
    !registerErrors.confirmPassword &&
    !registerErrors.verificationCode &&
    isAgree.value;
});

// 发送验证码
const sendVerificationCode = (type) => {
	// console.log("==邮件===>>", type);
  const form = type === 'login' ? loginForm : registerForm;
  const countdown = type === 'login' ? loginCountdown : registerCountdown;
  
  // 验证邮箱
  if (!validateEmail(form.email, type)) {
    return;
  }
  
  // 显示加载
  uni.showLoading({
    title: '发送中...'
  });
  
  // 调用邮件发送代码
  sendEmalil(registerForm.email, type);
  
};

// 执行邮件发送
async function sendEmalil(targetEmail, type){
	let res = await uni.$http.post("/common/sendEmailCode", {email: targetEmail});
	
	if(res.data.code == 0){
		uni.$showT(res.data.msg);
		uni.hideLoading();
		return 1;
	}
	
	// 设置倒计时
	if (type === 'login') {
	  loginCountdown.value = 60;
	  startLoginCountdown();
	} else {
	  registerCountdown.value = 60;
	  startRegisterCountdown();
	}
	
	// 发送成功，隐藏Lodding，显示成功提示，切换登录tab
	uni.hideLoading();
	uni.$showT("邮件发送成功!");
}

// 登录倒计时
const startLoginCountdown = () => {
  if (loginCountdown.value <= 0) return;
  
  setTimeout(() => {
    loginCountdown.value -= 1;
    if (loginCountdown.value > 0) {
      startLoginCountdown();
    }
  }, 1000);
};

// 注册倒计时
const startRegisterCountdown = () => {
  if (registerCountdown.value <= 0) return;
  
  setTimeout(() => {
    registerCountdown.value -= 1;
    if (registerCountdown.value > 0) {
      startRegisterCountdown();
    }
  }, 1000);
};

// 处理登录
const handleLogin = () => {
  if (loginWithVerification.value) {
	// xxxx 邮箱-验证码登录方式 已废弃 xxxxx
    
  } else {
    // 验证邮箱和密码
    const isEmailValid = validateEmail(loginForm.email, 'login');
    const isPasswordValid = validatePassword(loginForm.password, 'login');
    
    if (!isEmailValid || !isPasswordValid) {
      return;
    }
    
    // 实际登录逻辑 - 使用密码登录
    uni.showLoading({
      title: '登录中...'
    });
	
	excuteLogin();
  }
};

// 执行登录处理
async function excuteLogin(){
	let res = await uni.$http.post("/user/login", {email: loginForm.email, password: loginForm.password});
	if(uni.$axiosError(res) == 0) return; // 封装函数处理code为0的情况
	
	// 将返回的token存储到localstorage中
	uni.setStorageSync("token", res.headers.authorization);
	// 存储用户数据
	uni.setStorageSync("userInfo", res.data.data.user_info);
	
	uni.hideLoading();
	uni.$showT("登录成功，即将跳转...")
	
	setTimeout(()=>{
		uni.switchTab({
			url:"/pages/index/index"
		})
	}, 1500)
	
	
}

// 处理注册
const handleRegister = () => {
  // 验证表单
  const isUsernameValid = validateUsername(registerForm.username);
  const isEmailValid = validateEmail(registerForm.email, 'register');
  const isPasswordValid = validatePassword(registerForm.password, 'register');
  const isConfirmPasswordValid = validateConfirmPassword();
  const isCodeValid = validateVerificationCode(registerForm.verificationCode, 'register');
  
  if (!isUsernameValid || !isEmailValid || !isPasswordValid || !isConfirmPasswordValid || !isCodeValid) {
    return;
  }
  
  if (!isAgree.value) {
    uni.showToast({
      title: '请先同意用户协议和隐私政策',
      icon: 'none'
    });
    return;
  }
  
  // 实际注册逻辑
  uni.showLoading({
    title: '注册中...'
  });
  
  // 这里应该调用实际的注册API
  excuteOfRegister();
  
};

// 执行注册
async function excuteOfRegister(){
	
	// 封装请求参数
	let paramObj = {
		userName: registerForm.username,
		password: registerForm.password,
		email: registerForm.email,
		code: registerForm.verificationCode
	}
	
	let res = await uni.$http.post("/user/register", paramObj);
	
	if(res.data.code == 0){
		uni.$showT(res.data.msg);
		uni.hideLoading();
		return 0;
	}
	uni.hideLoading();
	let userEmail = registerForm.email;
	
	// 清空表单
	Object.keys(registerForm).forEach(key => {
	  registerForm[key] = '';
	});
	
	uni.$showT("注册成功!!")
	
	// 切换到登录Tab页
	activeTab.value = 'login';
	// 显示注册的邮箱地址
	loginForm.email = userEmail;
	
}

// 忘记密码
const forgetPassword = () => {
	uni.navigateTo({
		url: "/subPkg1/forget/forget"
	})
};

// 查看用户协议
const goToUserAgreement = () => {
  uni.navigateTo({
    url: '/pages/agreement/user-agreement'
  });
};

// 查看隐私政策
const goToPrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages/agreement/privacy-policy'
  });
};

// 页面加载时执行
onShow(() => {
	// 检查是否已登录
	const token = uni.getStorageSync('token');
	// 调用token校验接口，有效就直接跳转首页
	checkToken()
});

// 检查token的有效性
async function checkToken(){
	let res = await uni.$http.post("/common/checkToken", {token: uni.getStorageSync("token")});
	if(res.data.code == 0){
		// 校验失败
		return 0;
	}
	
	// token有效，无需重复登录，直接跳转首页
	uni.switchTab({
		url: "/pages/index/index"
	})
}

</script>

<style>
@import "@/static/iconfont.css";
.container {
  position: relative;
  padding: 0 30rpx;
  min-height: 100vh;
  background-color: #fff;
}

.back-icon {
  position: absolute;
  top: 40rpx;
  left: 20rpx;
  z-index: 10;
}

.back-icon .iconfont {
  font-size: 48rpx;
  color: #333;
}

.tab-box {
  display: flex;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  /* margin: 60rpx auto 0; */
  position: relative;
  z-index: 2;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #ff5500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 4rpx;
  background-color: #ff5500;
}

.form-box {
  background-color: #fff;
  padding: 50rpx 0;
  position: relative;
  z-index: 2;
}

.input-group {
  position: relative;
  margin-bottom: 30rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 20rpx 20rpx;
  display: flex;
}

.icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40rpx;
  color: #999;
}

.input {
  padding-left: 30rpx;
  height: 60rpx;
  font-size: 28rpx;
  color: #333;
  width: 100%;
}

.icon-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40rpx;
  color: #999;
}

.error-tip {
  font-size: 24rpx;
  color: #ff5500;
  padding-left: 10rpx;
  margin-bottom: 10rpx;
  height: 24rpx;
}

.forget-password {
  text-align: right;
  font-size: 24rpx;
  color: #666;
  /* margin: 20rpx 0; */
}

.submit-btn {
  margin-top: 50rpx;
  width: 100%;
  height: 90rpx;
  background: linear-gradient(90deg, #ff9f66, #ff6a33);
  border-radius: 45rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit-btn.disabled {
  background: #f9c7af !important;
  opacity: 0.9 !important;
}

.agreement {
  display: flex;
  align-items: center;
  margin-top: 30rpx;
}

.agreement-text {
  font-size: 24rpx;
  color: #666;
  margin-left: 10rpx;
}

.link {
  color: #ff5500;
}

.third-login {
  margin-top: 80rpx;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

.line {
  flex: 1;
  height: 1rpx;
  background-color: #eee;
}

.text {
  padding: 0 30rpx;
  font-size: 24rpx;
  color: #999;
}

.icons {
  display: flex;
  justify-content: center;
}

.icon-item {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 30rpx;
}

.icon-item .iconfont {
  font-size: 50rpx;
  color: #666;
}

/* 字体图标 */
@font-face {
  font-family: 'iconfont';
  src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAVQAAsAAAAACiQAAAUCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqHMIYlATYCJAMUCwwABCAFhGcHVxvQCBEVpJGQfXFgx1YfFVGsNJtRDI8ekqFN8/32HLr3AwjJFLOFYJYHaOF8HHxFpXWP1c58lbAERIXpyFM1LWESpmM6nvrm9Z7+BtMA87FlizHb2SJRFEEDHEWQQNGAFwke4O8NDAECCJCCRDdq0acjZhDQnxAAlCd8dDiWlgEmG4QizN6qZYS5WAEY5LwYXAMATJB/Hr1BImYAChYDQ7YNbxiO5KfiE2FiI2LXxXFQns8AwM0HYACSA0AfUNOruprB1Cs5DDHJbEYHADNIFCh8Kj4R+kQkj5BHxCbH+wOBZRKMjZGtUwqUFP8HCGAYFAoWUDSLlYcToE+EFgA+EUYNgk9EkbAK9TzRBQJMAqUAiEOgAoCVaIwBwbDNmCwYyHKOCpF8jmHXMlFr95FBzoyJAIJrZxXA+Ll1zNDyzaqmbVPMXc0y9+j+Ws2PGGrVr2vtqWv6/XqaprtDT40gPrNmb8lP8+/XaSZVIE1NrjjKmuqntk7z3qs5atrWdQ3TdnRfS7Np09ZDbZmBxq03b9dt3rptf2v3NVqbDtQbdVsOtm3Zf7jt2r21uhsO6m05nNZlBhtO3KHZfmiPrm3LwajWbQfb27YfatsS7ThE7xpt64lzxO0CzZ49R6JaUZO2Dtt1pLVl90Fj256DrYZ9h3dqU3eGmrbubdPGt9F9tYatB9rauq8JCraxcZuh9qfxNT9XxQcPNu3YYWxu2ZgQ79w9o3d4DpXOnNHrHD5zSNHw7Flda3G/8/iMBcXjUo+nTfR9XDWjLXP+jOFZLQsepxVWt2cNdzaOlkCkLqpylM5syfNsQcGiZxVRR0A7ozfz2YbAgtGjQ4nFO5NTcqUzRtDhnYfKo1PSq3umP4sTbWyRDzwYP2GCKnncgwkT22XPCzYMRxOXNK+fsKwQwA7aP3HZevrJjYObszY8e14xZeKY1eNWThq7Mif3Qk3dxLErE3JWrF2zpjnQHJdAE5oTJixLnqDKz6C3bq2u3mrG7dXVkOe+lzvqmzp3bN26A/JpZebMSLzc1x4JwFRG1sSJ0eXxOh2dlpw2KvKp4QxD7eTIqMjpsdOV0RmqCaJVn4YF39HXaEeXlx+KmBp8V7ei4siRivqFZPuS0vJDIedN5XJ6tRp6YPmDgYnkKnLNHHKALIFKkHPIUrK0ZDVZlbOGXBNmMGLV4CDZvqP1vffK92yveGsUvwLLvUhG+GvS/NeGX794sfXVi50Mvt0DQPhZqf1d//UPLd3FuA+G+NlUUTBl/NvnDPWzkVYMwKF+LsU8V30B+uVp/DlpHIQfEpIZagfY3yTiOxKK92XlN1n7oIQXHjgjsOEJUDBGQDHSOdhZyQELeAKwGMsDAgmmgwD5YvcOBwYMAySgjwZAkuYCFCnugZHmKthZfgALGv+BJUUMCCiyDwwYLYXhUKyCrqAdCj+QRRXKQW9QDRQzHUKpyvtQTHGkzEKzQrEEr2G5ehIqkAXSYhuaI2aw64IwkOoIuQpV2sBus3R3jVfL1CNQRREqw7aBJtFcQJ5A7SBRIKOQzkDewF3YV/ghKHXS45CYhGKKRsiYQUIR5KQEadFdW4nq+dQnBCXAYiCjSbYbTINYht5cMGAgKZdLEipRzQY4rCbrjDTxG8mTbySlyZdHzZr0pNa/Tj2AAMSAwEqMBItgEwLCQXv1gF8I4m7BIgPORXtUBObKtTxw9E9NZ6BgHzRnqcgW0UEBsQA=');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-user::before {
  content: "\e7ae";
}

.icon-email::before {
  content: "\e74f";
}

.icon-password::before {
  content: "\e75b";
}

.icon-eye::before {
  content: "\e78f";
}

.icon-eye-close::before {
  content: "\e8ff";
}

.icon-wechat::before {
  content: "\e882";
}

.icon-qq::before {
  content: "\e882";
}

.icon-weibo::before {
  content: "\e882";
}

.icon-item image{
	height: 30px;
}

.verification-switch {
  color: #ff5500;
}
.login-options {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666;
  /* margin: 20rpx 0; */
}
/* 验证码样式 */
.verification-group {
  position: relative;
}

.verification-input {
  padding-right: 200rpx;
}

.verification-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ff5500;
  color: white;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 50rpx;
  height: 60rpx;
  line-height: 40rpx;
  white-space: nowrap;
  z-index: 1;
}

.verification-btn[disabled] {
  background-color: #cccccc;
  color: #ffffff;
}
</style>